使用js根据标签获取文章目录

发表于 | 更新于

使用js根据标签获取文章目录

使用递归重写文章侧边栏目录生成方法

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 获取H标签等级
const getLevel = item => (item.match(/<h(\d+)/) || [])[1];

// 获取H标签内容
const getText = item => item.replace(/<[^>]+>/g, "");

// 获取目录html
function getTocHtml(html) {
  const data = (html.match(/<h[1-6](.*)?<\/h[1-6]>/g) || []).map(item => ({
    text: getText(item),
    level: getLevel(item)
  }));
  let i = 0; // 循环下标

  const getLiText = text => {
    const href = `toc-link-${i}`;
    return `\n<li><a name="link" class="toc-link ${href}" href="#${href}">${text}</a></li>\n`;
  };
  const getULText = text => (text ? `<ul class="toc-list">${text}</ul>\n` : "");

  function createInner(item, data) {
    let str = getLiText(item.text);
    while (data.length && data[0].level >= item.level) {
      i += 1;
      const it = data.shift();
      if (it.level === item.level) {
        // 添加一个li
        str += getLiText(it.text);
      } else {
        // 添加li内的ul
        str += createInner(it, data);
      }
    }
    return getULText(str);
  }
  // 防止出现先小等级标签在大等级标签下边的情况
  let resStr = ''
  while (data.length) {
    resStr += createInner(data.shift(), data)
    i += 1
  }
  return resStr
}

export default getTocHtml;